<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片浏览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="keywords" content="">
	<meta name="description" content="">

    <script src="./js/jquery.1.11.1.min.js"></script>
    <script src="./js/e-smart-zoom-jquery.js"></script>
    <style>
        .pv-container{position:absolute; left:0; top:0; right:0; bottom:0;}
        .zoomable-container{
            background: #fff;
            background-image:
                linear-gradient(45deg, #FBFBFB 25%, transparent 0, transparent 75%, #FBFBFB 0),
                linear-gradient(45deg, #FBFBFB 25%, transparent 0, transparent 75%, #FBFBFB 0);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="pv-container">
        <img src="" ref="img" id="imageFullScreen"/>
    </div>

    <script>
        $.getUrlParam = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return unescape(r[2]);
            return null;
        }

        function Init() {
            var src = $.getUrlParam('src');
            src && $('#imageFullScreen').attr({
                src: src
            })

            $('#imageFullScreen').smartZoom({
                containerClass: 'zoomable-container',
                width: '100%',
                height: '100%'
            });
        }

        $(document).ready(function() {
            Init()
        })
    </script>
</body>
</html>
